<template>
    <div class="footer_box">
        <div @click="handellikes" :class="islikes?'likes':''">点赞{{ props.item?.likes }}</div>
        <div><a href="#pl">评论</a></div>
        <div>分享</div>
    </div>
    <!-- <a-input v-model:value="value" @pressEnter="()=>laala()" placeholder="Basic usage" /> -->
</template>

<script setup lang="ts">
    import {ref,defineProps,defineEmits} from "vue";
    let islikes = ref(false)
    let timer = ref(null as any)
    let props = defineProps({
        item:{
            type:Object
        }
    })
    let emits = defineEmits(["tolikes"])
    let handellikes = () =>{
        //判断有无点击过
        if(timer.value){
            clearTimeout(timer.value)
        }
        timer.value = setTimeout(() => {
            let obj = {
            type:"like"
        }
        //点击过之后
        if(islikes.value){
            obj.type = "dislike"
        }
        emits("tolikes",obj )
        //重新赋值
        islikes.value = !islikes.value
        }, 650);
       
    }
    // let value = ref("")

    // let laala = () =>{
    //     if(value.value.trim() == ""){
    //         return
    //     }
        
    //     console.log(value.value,"value")
    //     console.log(111)
    // }

</script>

<style lang="scss">
@media screen and (min-width: 870px){
   #app div.footer_box{
        bottom: 50%;
        width: 100px;
        height: 280px;
        flex-direction: column;
        background: none;
        >div{
            border-radius:  50%;
            margin: 5px;
            background: #6f6ff6;
            cursor: pointer;
            // color: ;
            &.likes{
                background: pink;
            }
        }
    }
}


.footer_box{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 80px;
    background: #ccc;
    display: flex;
    justify-content: space-around;
    >div{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>